<template>
    <div>
    <a href="/Add">新增</a>
     <table class="table">
        <thead>
            <tr>
                <td>姓名</td>
                <td>密码</td>
                <td>出生日期</td>
                <td>年龄</td>
                <td>头像</td>
                <td>是否入职成功</td>
                <td>状态</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tr v-for="a in data">
                <td>{{a.userName}}</td>
                <td>{{a.userPwd}}</td>
                <td>{{a.userTime}}</td>
                <td>{{a.userAge}}</td>
                <td>
                    <img :src="'https://localhost:7004/'+ a.userImg" style="width: 50px; height: 50px;">
                </td>
                <td>{{a.userRuzhi==true?"成功":"未成功"}}</td>
                <td>{{a.hoteName}}</td>
                <td>{{a.userXbie==1?"男":"女"}}</td>
                <td>
                    <input type="button" value="编辑" @click="Fan(a.userId)">
                </td>
            </tr>
        </thead>
     </table>
一共{{indexs.count}}条,每页{{index.pagesize}}条,一共多少页{{indexs.pagecount}},当前第{{index.pageindex}}页
<input type="button" value="首页" @click="fenye(1)">
<input type="button" value="上一页" @click="fenye(2)">
<input type="button" v-for="a in indexs.pagecount":value="a" @click="shuzi(a)">
<input type="button" value="下一页" @click="fenye(3)">
<input type="button" value="尾页" @click="fenye(4)">

<input type="number" v-model="index.pageindex">
<input type="button" value="跳转" @click="tiao">

<select v-model="index.pagesize" @click="set">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { ref , onMounted } from 'vue';
import { useRouter } from 'vue-router';


const fenye=(val:any)=>{
    if(val==1){
    index.value.pageindex=1;
    getdata()
    }
    if(val==2 && index.value.pageindex>1){
    index.value.pageindex--;
    getdata()
    }
    if(val==3 && index.value.pageindex<indexs.value.pagecount){
    index.value.pageindex++;
    getdata()
    }
    if(val==4){
    index.value.pageindex=indexs.value.pagecount;
    getdata()
    }
}

const shuzi=(val:any)=>{
index.value.pageindex=val;
getdata()
}

const tiao=()=>{
if(index.value.pageindex<1 || index.value.pageindex>indexs.value.pagecount){
alert("页码无效")
index.value.pageindex=1;
return
}
getdata()
}

const set=()=>{
getdata()
}

const index = ref({
    pageindex : 1,
    pagesize : 3
})

const indexs = ref({
    count : 0,
    pagecount : 0
})

onMounted(()=>{
getdata()
})

const data = ref([ {
      "userId": 2,
      "hoteId": 2,
      "userName": "李思",
      "userPwd": "123",
      "userTime": "2025-02-10T00:00:00",
      "userAge": 20,
      "userImg": "嘿嘿",
      "userRuzhi": true,
      "hoteName": "1",
      "userXbie": 2
    }])

const getdata=()=>{
    axios.get("/api/User/GetAllAsync",{params:index.value}).then(res=>{
    data.value = res.data.pagecount
    
    indexs.value.count = res.data.count;
    indexs.value.pagecount = Math.ceil(indexs.value.count/index.value.pagesize);
    })
}

const Fan=(mid:any)=>{
router.push({path:'/Fan',query:{id:mid}})
}

</script>

<style scoped>

</style>